// 顶部工具栏（撤销，恢复...）
import React from 'react';
import { Row, Col, Popover, message } from 'antd';
import { PlusCircleOutlined, SaveOutlined, CheckCircleOutlined } from '@ant-design/icons';
import SelectLibaryModal from './SelectLibaryModal';
import BdhButton from 'src/pages/Components/BdhButton/index';
import style from './index.module.scss';
import { connect } from 'react-redux';
import { ActionCreators } from 'redux-undo';
import NewReportModal from 'src/pages/AnalyseManage/Components/NewReportModal';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import EditTopMenu from './components/EditTopMenu';
import { FILTER_MENU, PIE_MENU, QUOTA_MENU, TABLE_MENU, LINE_COLUMN_MENU, MAP_MENU, OTHER_MENU } from './DefaultConfig';
import PublishModal from './PublishModal';
import { createAnalysePageConfig } from 'src/services/AnalyseManage';
import { encryptParam } from 'src/libs/paramsEncrypt';

interface TopProps {
	saveConfig: Function,
	undo: () => void;
	redo: () => void;
	canUndo: boolean;
	canRedo: boolean;
	pageType: string;
	addChart: ( type ) => void;
	publishConfig: ( data?:any ) => void;
	pageContentConfig: any;
	pageId: string;
	reloadData: Function;
	pageInfo: any;
	btnAuth: any;
}

class EditorTop extends React.PureComponent<RouteComponentProps & TopProps> {
	state = {
		showLibaryModal: false,
		folderModalVisible: false,
		publishModalVisible: false,
		hoverActive: ''
	};

	toggleCopyModalVisible = ( boolean: boolean ) => {
		this.setState( {
			folderModalVisible: boolean
		} );
	};

	toCopyPage = async ( id: string, pageInfo ) => {
		//	复制后，保存配置，刷新当前页面
		const newPageContentConfig = {
			children: this.props.pageContentConfig.children,
			layoutConfig: this.props.pageContentConfig.layoutConfig,
			//	取复制的page信息,后端返回的原数据的type是报表类型，这里统一为前端的Page
			page: Object.assign( {}, this.props.pageContentConfig.page, pageInfo )
		};
		let data = { pageId: id, content: JSON.stringify( newPageContentConfig ) };
		const response = await createAnalysePageConfig( data );
		if ( response.data && response.data.success ) {
			message.success( '复制成功' );
		}

		this.props.history.replace( { pathname: `/analyseManage/editReport/${encryptParam( id )}/${encryptParam( 'true' )}/${encryptParam( 'EDIT' )}` } );
		this.toggleCopyModalVisible( false );
	};

	setHoverActive = ( id: string ) => {
		this.setState( {
			hoverActive: id
		} );
	}

	handleOk = ( data ) => {
		this.props.publishConfig( data );
		this.setState( { publishModalVisible: false } );
	}

	render() {
		const { saveConfig, addChart, pageType, btnAuth, } = this.props;
		// console.log( pageType );
		return (
			<>
				<Row justify="space-between" className={style.top_row}>
					<Col style={{ display: 'flex', alignItems: 'center' }}>
						<BdhButton disabled={!this.props.canUndo} onClick={() => this.props.undo()} type="text" label='撤销'
							icon={<span className="iconfont bdhchexiao"></span>}>
						</BdhButton>
						<BdhButton disabled={!this.props.canRedo} onClick={() => this.props.redo()} type="text" label="恢复"
							icon={<span className="iconfont bdhzhongzuo"></span>}>
						</BdhButton>
						<BdhButton type="text" label="复制" icon={<span className="iconfont bdhfuzhi"></span>}
							onClick={() => this.toggleCopyModalVisible( true )}>
						</BdhButton>
					</Col>
					<Col style={{ display: 'flex', alignItems: 'center' }}>
						<Popover placement="bottom" content={<EditTopMenu menuList={TABLE_MENU} addChart={( type ) => addChart( type )} ></EditTopMenu>} trigger="hover">
							<BdhButton
								type="text" label="表格"
								className={`${this.state.hoverActive === '1' ? 'primary-color' : ''}`} onMouseEnter={() => this.setHoverActive( '1' )}
								icon={<span className="iconfont bdhbiaoge"></span>}>
							</BdhButton>
						</Popover>

						<Popover placement="bottom" content={<EditTopMenu menuList={FILTER_MENU} addChart={( type ) => addChart( type )} ></EditTopMenu>} trigger="hover">
							<BdhButton type="text" label="过滤"
								className={`${this.state.hoverActive === '3' ? 'primary-color' : ''}`} onMouseEnter={() => this.setHoverActive( '3' )}
								icon={<span className="iconfont bdhziduanneirongtihuan"></span>}>
							</BdhButton>
						</Popover>
						{
							pageType === 'dashboard' && (
								<>
									<Popover content={<EditTopMenu menuList={PIE_MENU} addChart={( type ) => addChart( type )}></EditTopMenu>} trigger="hover">
										<BdhButton type="text" label="饼环"
											className={`${this.state.hoverActive === '4' ? 'primary-color' : ''}`} onMouseEnter={() => this.setHoverActive( '4' )}
											icon={<span className="iconfont bdhbingtu"></span>}>
										</BdhButton>
									</Popover>

									<Popover content={<EditTopMenu menuList={QUOTA_MENU} addChart={( type ) => addChart( type )}></EditTopMenu>} trigger="hover">
										<BdhButton type="text" label="指标"
											className={`${this.state.hoverActive === '5' ? 'primary-color' : ''}`} onMouseEnter={() => this.setHoverActive( '5' )}
											icon={<span className="iconfont bdhzhibiao1"></span>}>
										</BdhButton>
									</Popover>
									<Popover content={<EditTopMenu menuList={LINE_COLUMN_MENU} addChart={( type ) => addChart( type )}></EditTopMenu>} trigger="hover">
										<BdhButton type="text" label="线柱"
											className={`${this.state.hoverActive === '6' ? 'primary-color' : ''}`} onMouseEnter={() => this.setHoverActive( '6' )}
											icon={<span className="iconfont bdhxianzhu"></span>}>
										</BdhButton>
									</Popover>
									<Popover content={<EditTopMenu menuList={MAP_MENU} addChart={( type ) => addChart( type )}></EditTopMenu>} trigger="hover">
										<BdhButton type="text" label="地图"
											className={`${this.state.hoverActive === '7' ? 'primary-color' : ''}`} onMouseEnter={() => this.setHoverActive( '7' )}
											icon={<span className="iconfont bdhditu"></span>}>
										</BdhButton>
									</Popover>
								</>
							)
						}
						<Popover content={<EditTopMenu menuList={OTHER_MENU} addChart={( type ) => addChart( type )}></EditTopMenu>} trigger="hover">
							<BdhButton
								type="text"
								className={`${this.state.hoverActive === '2' ? 'primary-color' : ''}`}
								onMouseEnter={() => this.setHoverActive( '2' )} label="其他"
								icon={<span className="iconfont bdhtianchongziduan"></span>}>
							</BdhButton>
						</Popover>
					</Col>
					<Col style={{ display: 'flex', alignItems: 'center' }}>
						{
							btnAuth.includes( 'bi_editReport_selectLib' ) && (
								<>
									<BdhButton type="primary" className='primary-transpanent' align="horizontal" label="选择指标库" onClick={() => this.setState( { showLibaryModal: true } )}
										icon={<PlusCircleOutlined />}>
									</BdhButton>
									<i className={style.devideLine}></i>
								</>
							)
						}
						{
							btnAuth.includes( 'bi_editReport_save' ) && (
								<BdhButton align="horizontal" label="保存" className='grey-transpanent' onClick={() => saveConfig()}
									icon={<SaveOutlined />}>
								</BdhButton>
							)
						}
						{
							btnAuth.includes( 'bi_editReport_publish' ) && (
								<BdhButton type='primary' align="horizontal" label="发布" onClick={() => this.setState( { publishModalVisible: true } )}
									icon={<CheckCircleOutlined />}>
								</BdhButton>
							)
						}
					</Col>
				</Row>

				{/* 选择指标库弹窗 */}
				<SelectLibaryModal
					visible={this.state.showLibaryModal}
					data={[]}
					pageId={this.props.pageId}
					cancelHandle={() => this.setState( { showLibaryModal: false } )}
					reloadData={this.props.reloadData}
				></SelectLibaryModal>

				{/*	选择文件夹弹窗 */}
				<NewReportModal
					name={ pageType === 'report' ? '报表' : '仪表板'}
					pageType={pageType}
					parentTreeId={this.props.pageInfo.parentId}
					modalVisible={this.state.folderModalVisible}
					deloitteFlag={this.props.pageContentConfig.page.deloitteFlag}
					onSuccess={( id, pageInfo ) => this.toCopyPage( id, pageInfo )}
					onCancel={() => this.toggleCopyModalVisible( false )}
				></NewReportModal>
				
				{/* 发布弹窗 */}
				<PublishModal
					visible={this.state.publishModalVisible}
					handleOk={( data ) => this.handleOk( data )}
					handleCancel={() => this.setState( { publishModalVisible: false } )}
					pageContentConfig={this.props.pageContentConfig}
					pageId={this.props.pageId}
					reportInfo={this.props.pageInfo}
				></PublishModal>
			</>
		);
	}
}

//	映射state到当前组件
const mapStateToProps = ( state: any ) => {
	return {
		canUndo: state.editorHistory.past.length > 1,		//	初始化时会设置一次历史，所以这里要大于1，初始化设置不能被清除
		canRedo: state.editorHistory.future.length > 0,
		btnAuth: state.btnAuth,
	};
};

//	映射dispatch到当前组件
const mapDispatchToProps = ( {
	undo: ActionCreators.undo,
	redo: ActionCreators.redo
} );

export default withRouter( connect(
	mapStateToProps,
	mapDispatchToProps
)( EditorTop ) );
